<template>
  <div id="china"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { getChinaSvgData } from '@/api/area/area.js';
import { ref, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

/**
 * 绘制Echart省界
 */
const drawChina = async () => {
  const chinaDom = document.getElementById('china');
  const pChart = echarts.init(chinaDom);
  const svg = await getChinaSvgData();
  echarts.registerMap('chinaMap', { svg: svg });
  const option = {
    tooltip: {
      show: true,
      confine: true,
      backgroundColor: 'rgba(9, 28, 46, 0.8)',
      textStyle: {
        color: '#9BD5FF',
        fontFamily: 'Microsoft YaHei-Regular, Microsoft YaHei;',
        fontSize: 12
      }
    },
    geo: {
      map: 'chinaMap',
      roam: true,
      layoutSize: '120%', // 布局尺寸
      layoutCenter: ['50%', '50%'], // 布局位置
      emphasis: {
        label: {
          show: false // 高亮时文字不要出现
        },
        itemStyle: {
          color: 'rgba(0,0,0,0)',
          areaColor: 'rgba(0,0,0,0)',
          borderColor: '#FFFFFF',
          borderWidth: 3,
          opacity: 1
        }
      }
    },
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        symbol: 'roundRect',
        symbolSize: [40, 25],
        backgroundColor: '#FFF',
        // symbolOffset: [60, 60],
        tooltip: {
          show: false
        },
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              return params.data.name;
            },
            color: '#9BD5FF'
          }
        },
        itemStyle: {
          color: 'rgba(9, 28, 46, 0.8)'
        },
        avoidLabelOverlap: 0,
        data: [
          {
            name: '亦庄',
            value: [365, 155]
          },
          {
            name: '太和桥',
            value: [370, 165]
          },
          {
            name: '苏州',
            value: [405, 260]
          },
          {
            name: '南京',
            value: [400, 240]
          },
          {
            name: '上海',
            value: [415, 280]
          }
        ]
      }
    ]
  };
  pChart.setOption(option);
  // 选中省份
  pChart.on('geoselectchanged', function (params) {
    console.log(params.name);
  });
  // 点击
  pChart.on('click', function (params) {
    if (params.seriesType === 'scatter') {
      router.push({
        path: '/Area',
        query: {}
      });
    }
  });
};

onMounted(async () => {
  // 绘制Echart省界
  await nextTick;
  drawChina();
});
</script>

<style lang="less" scoped>
#china {
  width: 100%;
  height: 100%;
}
.numbers {
  position: absolute;
  display: flex;
  flex-direction: row;
  bottom: 1.25rem;
  color: #9bd5ffff;
  flex-wrap: wrap;
  justify-content: center;
  .number {
    width: 10rem;
    line-height: 2.5rem;
    .dot {
      margin-right: 0.25rem;
      margin-bottom: 2px;
      display: inline-block;
      width: 0.375rem;
      height: 0.375rem;
      border-radius: 50%;
      background-color: #3ec92eff;
    }
  }
  .number_name {
    margin-right: 1.25rem;
  }
}
</style>
